<template>
  <div>
    <div class="book-table-wrap">
      <div class="table-box" :class="{ contentFullWidth: !!selectedRow }">
        <el-table
          :data="bookDeskPageList"
          style="width: 100%"
          border
          :class="{ contentFullWidth: !!selectedRow }"
          height="3.3rem"
          @row-click="onRowClick"
          v-loading="loading"
          table-layout="fixed"
        >
          <el-table-column label="" width="60" fixed="left">
            <template #default="scope">
              <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">
                <span></span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="id"
            label="预订编号"
            fixed="left"
            width="100"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="user_name"
            label="顾客姓名"
            fixed="left"
            width="120"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="mobile"
            label="联系电话"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="use_num"
            label="用餐人数"
            width="100"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="desk_names"
            label="桌台"
            width="120"
          />
          <el-table-column show-overflow-tooltip align="center" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status?.value)" size="small" effect="light">
                {{ scope.row.status?.text || '未知' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="book_time.text"
            label="预订时间"
            width="200"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="book_over_time.text"
            label="取消时间"
            width="200"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="bookType.name"
            label="预订类型"
            width="120"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="book_money"
            label="定金金额"
            width="100"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="book_num"
            label="席数"
            width="80"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="clerk_name"
            label="代订人"
            width="150"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="create_time"
            label="创建时间"
            width="200"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { LocalStorage } from '@/utils/storage'

interface BookRow {
  id: number | string
  [key: string]: any
}

defineOptions({ name: 'BookTableList' })

const props = defineProps<{
  bookDeskPageList: BookRow[]
  loading?: boolean
}>()

const emit = defineEmits<{
  (e: 'rowSelected', row: BookRow): void
}>()

const templateSelection = ref<string | number | ''>(LocalStorage.get('bookId') || '')
const selectedRow = ref<BookRow | null>(null)

const onRowClick = (row: BookRow) => {
  selectedRow.value = row
  templateSelection.value = row.id
  LocalStorage.set('bookId', row.id)
  emit('rowSelected', row)
}

// 根据状态值返回标签类型
const getStatusType = (statusValue: number) => {
  switch (statusValue) {
    case 1: // 正常
      return 'success'
    case 2: // 已开台
      return 'warning'
    case 3: // 已结束
      return 'info'
    case 4: // 已过期
      return 'danger'
    default:
      return ''
  }
}

watch(
  () => props.bookDeskPageList,
  list => {
    if (!list || list.length === 0) {
      templateSelection.value = ''
      selectedRow.value = null
      LocalStorage.remove && LocalStorage.remove('bookId')
    }
  }
)
</script>
<style lang="scss" scoped>
.contentFullWidth {
  width: 100% !important;
}
::v-deep {
  .el-table {
    border-radius: 12px;
  }
  .el-table__body-wrapper {
    overflow-y: auto;
    overflow-x: auto;
  }
  //滚动条整体的大小
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px !important;
    height: 0 !important;
  }
  //滚动条里滑动的滑块
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    height: 200px !important;
    background: #d2d2d2 !important;
    border-radius: 3px !important;
  }
  //滚动条底层样式
  .el-table__body-wrapper::-webkit-scrollbar-track {
    display: none !important;
  }
  .el-table th.el-table__cell {
    background: #a85b62;
    color: #fff !important;
  }
}
.book-table-wrap {
  background: #fff;
  border-radius: 0px 0px 0px 20px;
  box-sizing: border-box;
  padding: 0 30px;
}
.table-box {
  width: 100%;
  border-radius: 12px;
}
</style>
